<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text>修改昵称</text>
					<view class="closeBox" @click="isAdd = false">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="inputBox">
					<view class="inputTitle">
						*昵称：
					</view>
					<view class="nickInput">
						<input type="nickname" v-model="nickName" @blur="onBlur" />
						<!-- <input type="text" v-model="nickName" placeholder="" /> -->
					</view>
					<view class="tip">
						限制4-10个字符，可由中英、数字、符号组成
					</view>
				</view>
				
				<view class="xunBottomBox">
					<text class="btn1" @click="isAdd = false">取消</text>
					<text class="btn2" @click="submitSign">确定</text>
				</view>	
				
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import { updateUserInfo } from '@/api/login.js';
	export default {
		name:"updateInfo",
		data() {
			return {
				isAdd: false,
				nickName: ''
			};
		},
		methods:{
			submitSign(){
				const pmm = {
					id: uni.getStorageSync('userInfo').id,
					nickName: this.nickName,
					headerImage: uni.getStorageSync('userInfo').headerImage
				};
				updateUserInfo(pmm).then(res=>{
					if(res.code == 200) {
						this.isAdd = false;
						this.$emit('showUseInfo');
					} else {
						uni.$u.toast(res.msg);
					}
				})
				
			},
			// 获取昵称
			onBlur(e) {
				this.nickName = e.detail.value;
			},
			showInfo(){
				this.nickName = uni.getStorageSync('userInfo').nickName;
				this.isAdd = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
		.purchaseBox{
			background: #fff;border-radius: 32rpx 32rpx 0px 0px;padding:0 24rpx 192rpx;
			.baseTop{
				text-align: center;@include flx;justify-content: center;
				text{
					display: block;@include baseFont(36rpx,#333,108rpx);font-weight: 500;
				}
				.closeBox{
					position: absolute;right:38rpx;top:52rpx;
					image{
						display: block;width:24rpx;height:24rpx;
					}
				}
			}
			.xunBottomBox{
				height: 180rpx;background: #FFFFFF;@include flx;justify-content: space-between;position: fixed;bottom:0;left:0;
				box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);width:100%;z-index:999;
				text{
					display: block;width: 336rpx;height: 80rpx;background: #EFEFF1;text-align: center;
					border-radius: 40rpx;@include baseFont(30rpx,#17181B,80rpx);margin-top:18rpx;
				}
				.btn1{
					margin-left:24rpx;
				}
				.btn2{
					margin-right:24rpx;background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);color:#fff;font-weight:500;
				}
			}
			.inputBox{
				padding-bottom:140rpx;
				.inputTitle{
					@include baseFont(28rpx,#333,36rpx);margin-bottom:20rpx;margin-bottom:18rpx;
				}
				.nickInput{
					input{
						display: block;@include baseFont(28rpx,#333,64rpx);border-bottom:2rpx solid #F0F0F0;
					}
				}
				.tip{
					@include baseFont(28rpx,#979797,36rpx);margin-top:22rpx;
				}
			}
		}
	}		
</style>